<template>
  <SzCrud :cellClassName="cellClassName"
                :crm-type="crmType"
                :create-type="crmType"
                addBtnText="新建联系人"
                search-place-holder="请输入联系人姓名/手机/电话">
    <template v-slot:detail="{crmOption, elTableOption,fieldAndListOption,handleHandle,crmOptionChange}">
      <ContactsDetail v-model:visible="crmOption.showDview"
                     v-model:id="elTableOption.rowID"
                     :crmOptionChange="crmOptionChange"
                     :page-list="crmOption.crmType == elTableOption.rowType ? fieldAndListOption.dataList : []"
                     v-model:page-index="elTableOption.rowIndex"
                     class="d-view" @hide-view="crmOption.showDview=false" @handle="handleHandle"></ContactsDetail>
    </template>
    <template v-slot:create="{crmOption, elTableOption,fieldAndListOption,handleHandle,crmOptionChange}">
      <ContactsCreate v-if="crmOption.createShow" :createAction="crmOption.createAction"
                     @close="crmOption.createShow = false"
                     @save-success="handleHandle"/>
    </template>
  </SzCrud>
</template>

<script setup>
import ContactsCreate from './Create.vue'
import ContactsDetail from './Detail.vue'
import SzCrud from "/src/views/crm/componentsNew/SzCrud/SzCrud.vue";

defineOptions({
  /** 客户管理 的 产品列表 */
  name: 'ContactsIndex',
})


const crmType = ref('contacts')

/**
 * 通过回调控制class
 */
function cellClassName({row, column, rowIndex, columnIndex}) {
  if (column.property === 'name') {
    return 'can-visit--underline can-visit--bold'
  } else if (column.property === 'customerName') {
    return 'can-visit--underline'
  } else {
    return ''
  }
}

</script>


<style lang="scss" scoped>
@import '../styles/table';
</style>
